<template>
	<label>
		<div class="hot" :style="{width:width}" v-if="isShow">
			<p v-for="(item,index) in showList" @click="selectItem(item)" :key="index">{{item}}</p>
		</div>
		
	</label>
</template>

<script>
	export default{
		data(){
			return{
				showList:[],
				isShow:false,
				val:''				
			}
		},
		props:['value','width'],
		methods:{
			selectItem(value){
				this.$emit('hotClick',value)
				this.isShow = false
				this.showList = []
			},
			getHotWord(val){
				this.$axios.get('/api/dictionary/getAccountList',{
					params:{
						accountDisplay:val
					}
				}).then(res=>{
					console.log(res.data)
					if(res.data!=null&&res.data!=''&&res.code==200){
						this.isShow = true
						this.showList = []
						res.data.forEach(item=>{
							this.showList.push(item.accountDisplay)
						})
						// this.showList=res.data
					}else{
						this.isShow = false
						this.showList = []
					}		
				})
			}
		},
		watch:{
			value:function(val){
				this.val = val
				this.showList = []
				this.isShow = false
				if(val!==''){
					this.getHotWord(this.val)
				}else{
					this.showList = []
					this.isShow = false
				}
			}
		}
	}
</script>

<style scoped>
.hot{
	position: absolute;
	top: 42px;
	border-radius: 4px;
	border: 1px solid #DCDFE6;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	z-index: 9;
	background-color: #FFFFFF;
}	
.hot p{
	padding-left: 20px;
	color: #606266;
}
.hot p:hover{
	background-color: #f5f7fa;
	cursor: pointer;
}

</style>
